<template>
    <div>
        App...
        <button ref="btn" >btn</button><br>
        <input type="text" ref="ipt">
        <Child ref="child"/>
    </div>
</template>

<script>
import Child from './Child.vue';

export default {
    name:"App",
    /*
        ref 语法
            功能：
            1. 获取真实DOM元素
            2. 获取组件实例对象

            语法：
            1. 给元素绑定ref属性
            2. 通过 this.$refs.xxx 获取真实DOM元素
    */
    created(){
        console.log("created",this.$refs.btn);
    },
    mounted(){
        console.log("mounted",this.$refs.btn);
        console.log("mounted",this.$refs.ipt);
        console.log("mounted",this.$refs.child);
    },
    components:{
        Child,
    },
};
</script>

<style></style>
